import React, { Component } from 'react';
import { Table, Tag, message, Modal, Tooltip,Empty } from 'antd';
import { ExclamationCircleOutlined, LinkOutlined, LockOutlined } from '@ant-design/icons';
import axios from './../../../axios';
import Utils from './../../../utils/utils';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import baseURL from './../../../config/baseurl';

class Share extends Component {
	
	state = {
		fileList: "",//文件列表
		shareTotal: 0,//分享个数
		groupid: "",//当前操作的群id
		groupname: "",//当前操作的群名称
		res: false
	}
	
	componentDidMount(){
		//获取分享列表
		this.requestList();
	}
	
	refreshList = () => {}
	
	//获取分享列表
	requestList = () => {
		axios.get({
			url:"/share/shareLink/shareLinkList",
			params: {page: 1, pageSize: 1000}
		}).then(res => {
			if(res.code === 0){
				//Table的数据没有key就报错，自己加一个key
				let resData = res.result.data.map((item, index)=>{
					let key = index;
					let name = item.fileid;
					let time = Utils.formateDate(item.expire_time);
					let id = item.id;
					let url = item.link_url;
					let pwd = item.link_pwd;
					let is_expire = item.is_expire;
					let is_need_pwd = item.is_need_pwd;
					return {key, name, time, id, url, pwd, is_expire, is_need_pwd}
				})
				this.setState({
					dataSource: resData,
					shareTotal: res.result.total,
					res: true
				})
			}
		})
	}
	
	//复制链接及密码
	onCopy = () => {
		message.success("复制成功");
	}
	
	//删除分享链接
	handleDelete = (record) => {
		Modal.confirm({
			title: `确认删除 ？`,
			icon: <ExclamationCircleOutlined />,
			content: "一经删除，不能恢复",
			okText: "确认删除",
			cancelText: "取消",
			onOk:()=>{
				axios.ajax({
					url: "/share/shareLink/cancleShareLink",
					method: "post",
					data: {shareLinkId: record.id}
				}).then(res=>{
					if(res.code === 0){
						message.success(res.msg);
						this.requestList();
					}
				}).catch(err=>{
					message.error("删除失败");
				})
			}
		})
	}
	
	render(){
		const shareurl= baseURL + "/#/shareLink/";
		const columns = [
			{
				title: '分享文件名',
				render: item => {
					return <div>
						<LinkOutlined />&nbsp;{item.id}&nbsp;
						{item.is_need_pwd === 1 ?
							<Tooltip placement="bottomLeft" title="私密链接">
								<LockOutlined />
							</Tooltip>:null
						}
					</div>
				}
			},
			{
				title: "是否过期",
				dataIndex: "is_expire",
				render: item => {
					return item === 1 ? <Tag color="red">已过期</Tag> : <Tag color="cyan">正常</Tag>;
				}
			},
			{
				title: '到期时间',
				dataIndex: 'time',
			},
			{
				title: '',
				key: 'action',
				render: (text, record) => {
					return <div>
						{record.is_need_pwd?
							<CopyToClipboard text={`${shareurl + record.url}密码:${record.pwd}`} onCopy={this.onCopy}>
								<Tag color="#108ee9">复制链接</Tag>
							</CopyToClipboard>
							:
							<CopyToClipboard text={`${shareurl + record.url}`} onCopy={this.onCopy}>
								<Tag color="#108ee9">复制链接</Tag>
							</CopyToClipboard>
						}
						<Tag color="#f45656" onClick={() => this.handleDelete(record)}>取消分享</Tag>
					</div>
				}
			}
		]
		return (
			<>
				{this.state.shareTotal > 0 ?
					<div className="sharelink-wrap">
						<Table
							columns={columns}
							dataSource={this.state.dataSource}
							pagination={false}
						/>
						<p style={{textAlign: "center", margin: "15px 0"}}>共{this.state.shareTotal}项</p>
					</div>
					: this.state.res?
					<div className="empty-page">
						<div>
								<Empty description='暂无数据'/>
						</div>
					</div>: ""
				}
			</>
		)
	}
}

export default Share;